<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="libs/js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="libs/js/unslider.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	/*ul, ol { padding: 0;}*/
	
	.banner {position: relative; overflow: auto; text-align: center;}
	.banner li { list-style: none; }
	.banner ul li { float: left; }
	#box{
		margin: 0 auto;
		width: 1000px;
		height: 510px;
		border: 1px solid black;
	}
	#box .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
	#box .dots li{ 
	    display: inline-block; 
	    width: 10px; 
	    height: 10px; 
	    margin: 0 4px; 
	    text-indent: -999em; 
	    border: 2px solid #EEEEEE; 
	    border-radius: 6px; 
	    cursor: pointer; 
	    opacity: .4; 
	    -webkit-transition: background .5s, opacity .5s; 
	    -moz-transition: background .5s, opacity .5s; 
	    transition: background .5s, opacity .5s;
	}
	#box .dots li.active {
	    background: #fff;
	    opacity: 1;
	}
	#box .arrow { position: absolute; top: 200px;}
	#box #al { left: 15px;}
	#box #ar { right: 15px;}
	#box ul img{
		width:1000px;
		height:510px;
	}
	</style>
	<body>
		<div class="banner" id="box">
			<ul>
				<li><img src="libs/img/a.jpg"/></li>
				<li><img src="libs/img/b.jpg"/></li>
				<li><img src="libs/img/c.jpg"/></li>
				<li><img src="libs/img/d.jpg"/></li>
				<li><img src="libs/img/e.jpg"/></li>
				<li><img src="libs/img/f.jpg"/></li>
			</ul>
			<a href="#" class="unslider-arrow04 prev"><img class="arrow" id="al" src="libs/arrowl.png" alt="prev" width="20" height="35"></a>
    		<a href="#" class="unslider-arrow04 next"><img class="arrow" id="ar" src="libs/arrowr.png" alt="next" width="20" height="37"></a>
		</div>
		<script type="text/javascript">
			$(document).ready(function(e) {
			    var unslider04 = $('#box').unslider({
			        dots: true
			    }),
		    	data04 = unslider04.data('unslider');		    
			    $('.unslider-arrow04').click(function() {
			        var fn = this.className.split(' ')[1];
			        data04[fn]();
			    });
			});
		</script>
	</body>
</html>
